<template>
  <view class="container">
    <view class="container__body">
      <!--   列表   -->
      <view class="container__body__list">
        <view class="container__body__list__item" v-for="(item, index) in list" :key="index">
          <view class="container__body__list__item__content">
            <view class="container__body__list__item__content__left active">
              <view class="container__body__list__item__content__left__price" v-if="item.couponType === '3'">
                <text>{{ item.couponDenomination }}</text>折
              </view>
              <view class="container__body__list__item__content__left__price" v-else>
                ¥<text>{{ item.couponDenomination }}</text>
              </view>
              <view class="container__body__list__item__content__left__condition">
                <text v-if="item.couponType === '1'||item.couponType === '3'">满{{ item.couponThreshold }}可用</text>
                <text v-else-if="item.couponType === '2'">无门槛</text>
              </view>
            </view>
            <view class="container__body__list__item__content__center">
              <view class="container__body__list__item__content__center__name">
                <text>{{ item.couponName }}</text>
              </view>
              <view class="container__body__list__item__content__center__validTime">
                有效期：
                <text>{{ item.activityStartTime }}至{{ item.activityEndTime }}</text>
              </view>
              <view class="container__body__list__item__content__center__desc">
                <view class="container__body__list__item__content__center__desc__label">使用说明：</view>
                <view class="container__body__list__item__content__center__desc__text"
                      v-html="item.couponInstruction"></view>
                <view class="container__body__list__item__content__center__desc__detail"
                      @click="handleShowCouponInstruction(item)">详情
                </view>
              </view>
            </view>
            <view class="container__body__list__item__content__right">
              <view class="container__body__list__item__content__right__button"
                    :class="{'active': item.receiveState === '0'}" v-if="item.receiveState === '0'" @click.stop="handleToUseCoupon(item)">
                立即使用
              </view>
              <view class="container__body__list__item__content__right__button" @click.stop="handleReceiveCoupon(item)" v-else>
                立即领取
              </view>
            </view>
          </view>
        </view>
        <uni-load-more :status="loadStatus" :contentText="contentText"></uni-load-more>
      </view>
    </view>
    <!--   弹窗   -->
    <hxk-dialog ref="couponInstructionDialog">
      <view class="dialog__content" slot="content">
        <view class="dialog__content__desc" v-html="dialogData.couponInstruction"></view>
      </view>
    </hxk-dialog>
  </view>
</template>
<script>
import {addCouponRecord, getCouponList} from "@/api/mine/coupon";
import {debounce} from "@/utils/common";

export default {
  name: "index",
  data() {
    return {
      searchType: 'premisesAddress',
      // 搜索标签
      searchTabs: [
        {
          label: "未使用(0)",
          value: "1"
        },
        {
          label: "已使用(0)",
          value: "2"
        },
        {
          label: "已过期(0)",
          value: "3"
        }
      ],
      // 列表数据
      list: [],
      // 总数
      total: 0,
      // 分页参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: null//搜索关键字
      },
      // 加载状态
      loadStatus: 'more',//more:加载更多,noMore:没有更多数据,loading:加载中
      // 加载提示语
      contentText: {contentdown: '下拉加载更多', contentrefresh: "加载中...", contentnomore: "没有更多数据了"},
      // 弹窗数据
      dialogData: {}
    }
  },
  onLoad() {
    // 页面显示,重新获取数据
    this.initData();

  },
  onReachBottom() {
    // 加载更多,如果总数大于当前页数*pageSize,则加载更多
    if (this.total > this.queryParams.pageNum * this.queryParams.pageSize) {
      this.loadStatus = 'loading';
      this.queryParams.pageNum++;
      this.getList();

    } else if (this.total <= this.queryParams.pageNum * this.queryParams.pageSize) {
      // 已经加载完毕
      console.log("已经加载完毕")
      this.loadStatus = 'noMore';
    }

  },
  methods: {
    initData() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        keyword: ''//搜索关键字
      }
      this.list = [];
      this.total = 0;
      this.getList();
    },
    // 搜索
    handleSearch() {
      this.queryParams.pageNum = 1;
      this.queryParams.keyword = this.queryParams.keyword.trim();
      this.list = [];
      this.getList();
    },
    // 获取列表数据
    getList() {
      this.loadStatus = 'loading';
      setTimeout(() => {
        let params = Object.assign({}, this.queryParams)
        console.log('请求参数', params, this.searchType)
        params[this.searchType] = this.queryParams.keyword
        getCouponList(params).then(res => {
          //当前为第一页
          if (this.queryParams.pageNum === 1) {
            this.list = res.rows;
          } else {
            // 不是第一页,则追加数据
            this.list = this.list.concat(res.rows);
          }
          this.total = res.total;
          this.loadStatus = this.total <= this.queryParams.pageNum * this.queryParams.pageSize ? 'noMore' : 'more';
          // 如果没有数据
          if (this.total === 0) {
            this.loadStatus = 'noMore';
            this.contentText.contentnomore = "暂无数据";
          }
        }).catch(err => {
          console.log(err)
        })

      }, 500);

    },
    // 显示使用说明
    handleShowCouponInstruction(item) {
      this.dialogData = item;
      this.$refs.couponInstructionDialog.confirm({
        title: '使用说明',
        showCancel: false,
        confirmText: '知道了'
      })
    },
    // 领取优惠券
    handleReceiveCoupon:debounce(function (item) {
      let params = {
        couponId: item.couponId,
        pickupMethod: "1" //领取方式(1.领券中心,2.商品详情,3.核销码,4.指派)
      }
      this.$modal.loading('领取中...')
      addCouponRecord(params).then(res => {
        setTimeout(() => {
          this.$modal.closeLoading()
          this.$modal.msg('领取成功')
          item.receiveState = '0';
        }, 500)
        //向上抛出事件,通知父页面
        const eventChannel = this.getOpenerEventChannel();
        if (eventChannel && eventChannel.emit) {
          eventChannel.emit('couponCenterCallback')
        }
      }).catch(err => {
        this.$modal.closeLoading()
        this.$modal.msg(err.msg || '领取失败')
      })
    }, 1000, true),
    // 立即使用优惠券
    handleToUseCoupon(item) {
      if (['1', '3'].includes(item.applyScope)) {
        this.$tab.switchTab('/pages/home/index')
      } else if (item.applyScope === '2') {
        this.$tab.navigateTo({
          url: '/pages/mine/coupon/activity?coupon=' + JSON.stringify(item),
        })
      }
    },
  }
}
</script>

<style scoped lang="scss">
.container {
  .container__header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #fff;
    //height: 154rpx;
    display: flex;
    flex-direction: column;

    .container__header__search {

      .container__header__search-input {
        padding: 0 20rpx;

        .search-btn {
          background: $hxk-primary-color;
          color: #fff;
        }

        .cancel-btn {
          color: $hxk-primary-color;
          background: #fff;
          border: none;

          &:after {
            border: none;
          }
        }

        .container__header__search-input-type {
          margin-top: 10rpx;

          ::v-deep .checklist-group {
            display: flex;
          }

          ::v-deep .is--tag {

            &.is-checked {
              background: $hxk-primary-color !important;
              border-color: $hxk-primary-color !important;
            }
          }
        }
      }

      .container__header__search-tabs {
        ::v-deep .u-tabs__wrapper__nav__item__text {
          font-size: 28rpx !important;
        }

        ::v-deep .u-tabs__wrapper__nav__line {
          bottom: 18rpx !important;
          opacity: 0.6 !important;
        }
      }
    }


  }

  .container__body {
    padding: 20rpx;

    .container__body__list {
      margin-bottom: 150rpx;

      .container__body__list__item {
        background-color: #fff;
        border-radius: 10rpx;
        margin-bottom: 10rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .container__body__list__item__content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20rpx;

          .container__body__list__item__content__left {
            width: 25%;
            text-align: center;

            &.active {
              color: $hxk-primary-color;
            }

            .container__body__list__item__content__left__price {
              font-size: 20rpx;
              margin-bottom: 10rpx;

              text {
                font-size: 32rpx;
                font-weight: bold;
              }
            }

            .container__body__list__item__content__left__condition {
              font-size: 20rpx;
            }
          }

          .container__body__list__item__content__center {
            padding: 0 10rpx;
            border-left: 1rpx dashed #D7D7D7;
            width: 60%;

            .container__body__list__item__content__center__name {
              font-size: 28rpx;
              margin-bottom: 20rpx;
              font-weight: bold;
            }

            .container__body__list__item__content__center__validTime {
              font-size: 24rpx;
              margin-bottom: 20rpx;
            }

            .container__body__list__item__content__center__desc {
              font-size: 24rpx;
              line-height: 32rpx;
              text-align: justify;
              display: flex;

              .container__body__list__item__content__center__desc__label {
                white-space: nowrap;
              }

              .container__body__list__item__content__center__desc__text {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
              }

              .container__body__list__item__content__center__desc__detail {
                color: #02BAF6;
                white-space: nowrap;
              }

            }
          }

          .container__body__list__item__content__right {
            width: 15%;
            text-align: center;

            .container__body__list__item__content__right__button {
              display: block;
              width: 100%;
              height: 50rpx;
              line-height: 50rpx;
              border-radius: 10rpx;
              background-color: $hxk-primary-color;
              color: #FFFFFF;
              font-size: 22rpx;

              &.active {
                border: 1rpx solid $hxk-primary-color;
                background-color: #fff;
                color: $hxk-primary-color;
              }
            }
          }
        }
      }
    }
  }

  .container__footer {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    width: 100%;
    padding: 0 20rpx;
    height: 140rpx;
    background: #fff;

    .container__footer__button {
      width: 100%;
      margin-right: 20rpx;

      &:last-child {
        margin-right: 0;
      }

      &.active {
        button {
          background-color: $hxk-primary-color;
          color: #fff;
        }
      }

      button {
        height: 70rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        //background-color: $hxk-primary-color;
        color: #000;
        font-size: 28rpx;
      }

    }
  }
}
</style>
